/* icons为预先准备好的图标100个
 size为每页显示的个数
 page是显示的总页数 向上取整(一个也会占一页)
 pageCount为要显示的数字按钮的个数 */
const icons = [
    "pregnant_woman",
    "accessibility",
    "accessibility_new",
    "emoji_people",
    "sports_kabaddi",
    "sports_handball",
    "elderly",
    "accessible",
    "accessible_forward",
    "hotel",
    "sports_baseball",
    "sports_basketball",
    "sports_football",
    "sports_golf",
    "sports_hockey",
    "sports_motorsports",
    "sports_rugby",
    "sports_soccer",
    "sports_tennis",
    "sports_volleyball",
    "pedal_bike",
    "moped",
    "two_wheeler",
    "directions_car",
    "local_taxi",
    "local_shipping",
    "directions_bus",
    "directions_transit",
    "subway",
    "flight",
    "mouse",
    "keyboard",
    "headset",
    "desktop_mac",
    "sim_card",
    "phone_android",
    "phone_iphone",
    "watch",
    "videogame_asset",
    "scanner",
    "attach_email",
    "attachment",
    "cloud_circle",
    "cloud_download",
    "cloud_upload",
    "text_snippet",
    "request_quote",
    "folder",
    "topic",
    "folder_shared",
    "4k",
    "fiber_new",
    "fiber_dvr",
    "explicit",
    "closed_caption",
    "hd",
    "high_quality",
    "closed_caption_disabled",
    "score",
    "picture_as_pdf",
    "filter_1",
    "filter_2",
    "filter_3",
    "filter_4",
    "filter_5",
    "filter_6",
    "filter_7",
    "filter_8",
    "filter_9",
    "filter_9_plus",
    "looks_one",
    "looks_two",
    "looks_3",
    "looks_4",
    "looks_5",
    "exposure_neg_1",
    "exposure_neg_2",
    "exposure_zero",
    "exposure_plus_1",
    "exposure_plus_2",
    "camera_alt",
    "center_focus_strong",
    "camera",
    "camera_roll",
    "photo",
    "movie_creation",
    "motion_photos_on",
    "motion_photos_paused",
    "local_movies",
    "movie_filter",
    "arrow_forward",
    "arrow_back",
    "subdirectory_arrow_right",
    "subdirectory_arrow_left",
    "arrow_downward",
    "arrow_upward",
    "north_east",
    "north_west",
    "south_east",
    "south_west",
],
    size = 10,
    page = Math.ceil(icons.length / size),
    pageCount = 5;

//当前选中的页数
let currentPage = 8;

//显示内容列表
const _content = document.querySelector(".content");
const showContent = () => {
    _content.innerHTML = "";
    icons.forEach((item, index) => {
        if (index >= (currentPage - 1) * size && index < currentPage * size) {
            const li = document.createElement("li");
            li.innerHTML = `<i class="material-icons">${item}</i>
            <p>${index + 1}</p>`;
            _content.appendChild(li);
        }
    })
}

//创建分页列表
const _pagination = document.querySelector(".pagination");
const createPagination = () => {
    showContent();

    //设置左按钮的显示状态
    let lis = `<li class="material-icons page-btn page-btn-prev ${currentPage !== 1 ? "isClick" : ""} ">chevron_left</li>`;

    if (currentPage < 1 || currentPage > page) {
        throw `currentPage参数最小值为1 最大值为${page}`
    } else if (pageCount < 5) {
        throw `pageCount参数最小为5`;
    } else if (page <= pageCount) {
        //如果分页小于5 不限制省略号
        for (let i = 1; i <= page; i++) {
            lis += `<li class="page-number ${i == currentPage ? "active" : ""}">${i}</li>`
        }
    } else {
        //定义两个参数
        //用来保存当前选中页面的前后按钮
        let beforeNumber = Math.floor(currentPage - (pageCount - 3) / 2),
            afterNumber = Math.floor(currentPage + (pageCount - 3) / 2);

        //显示左省略按钮
        if (currentPage >= pageCount - 1) {
            lis += `<li class="page-number">1</li>
        <li class="material-icons page-dot page-dot-prev"></li>`
        }

        if (currentPage >= 1 && currentPage < pageCount - 1) {
            beforeNumber = 1;
            afterNumber = pageCount - 1;
        } else if (currentPage <= page && currentPage > page - (pageCount - 2)) {
            beforeNumber = page - (pageCount - 2);
            afterNumber = page;
        }
        for (let i = beforeNumber; i <= afterNumber; i++) {
            lis += `<li class="page-number ${i == currentPage ? "active" : ""}">${i}</li>`
        }
    }

    //显示右省略按钮
    if (currentPage <= page - (pageCount - 2)) {
        lis += `<li class="material-icons page-dot page-dot-next"></li>
            <li class="page-number">${page}</li>`
    }


    //设置右按钮
    lis += `<li class="material-icons page-btn isClick page-btn-next ${currentPage !== page ? "isClick" : ""}">chevron_right</li>`;

    _pagination.innerHTML = lis;

    // 点击数字按钮
	const _pageNumbers = document.querySelectorAll(".page-number");
	_pageNumbers.forEach((item) => {
		item.addEventListener("click", () => {
			// item.innerHTML为字符串 需要转为数字
			currentPage = parseInt(item.innerHTML);
			createPagination();
		});
	});

	// 下一页
	const _pageBtnNext = document.querySelector(".page-btn-next");
	_pageBtnNext.addEventListener("click", () => {
		if (currentPage !== page) {
			currentPage++;
			createPagination();
		}
	});

	// 上一页
	const _pageBtnPrev = document.querySelector(".page-btn-prev");
	_pageBtnPrev.addEventListener("click", () => {
		if (currentPage !== 1) {
			currentPage--;
			createPagination();
		}
	});

	// 前进 pageCount - 2 格
	const _pageDotNext = document.querySelector(".page-dot-next");
	// 因为省略按钮会时隐时现 直接绑定会报找不到元素错误
	// ?. 就可以了 只有元素存在再去绑定后面的事件
	_pageDotNext?.addEventListener("click", () => {
		currentPage += pageCount - 2;
		createPagination();
	});

	// 后退 pageCount - 2 格
	const _pageDotPrev = document.querySelector(".page-dot-prev");
	_pageDotPrev?.addEventListener("click", () => {
		currentPage -= pageCount - 2;
		createPagination();
	});
};
createPagination();
